// assets/styles/custom-scrollbar.less

// 1. 定义滚动条整体的宽度和高度
// 垂直滚动条的宽度，水平滚动条的高度
::-webkit-scrollbar {
  width: 10px; // 垂直滚动条宽度
  height: 10px; // 水平滚动条高度
}

// 2. 定义滚动条轨道（背景）的样式
::-webkit-scrollbar-track {
  background: #f1f1f1; // 轨道背景色，可以更浅或透明
  border-radius: 5px; // 轨道圆角
}

// 3. 定义滚动条滑块（拖动部分）的样式
::-webkit-scrollbar-thumb {
  background: #888; // 滑块默认颜色
  border-radius: 5px; // 滑块圆角，使其看起来更光滑
  border: 2px solid #f1f1f1; // 给滑块添加边框，与轨道背景色保持一致，增加立体感
  transition: background 0.3s ease; // 平滑过渡效果

  // 鼠标悬停在滑块上时的样式
  &:hover {
    background: #555; // 鼠标悬停时滑块颜色变深
  }

  // 鼠标点击/拖动滑块时的样式
  &:active {
    background: #333; // 鼠标点击时滑块颜色更深
  }
}

// 4. 定义滚动条角落（垂直和水平滚动条交汇处）的样式
::-webkit-scrollbar-corner {
  background: transparent; // 通常设置为透明或与轨道背景色一致
}
